<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>茂名民宿短租</title>

  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
  <script src="../js/Axios/axios-0.18.0.js"></script>
  <script src="../js/Vue/vue.js"></script>
  <script src="../element-ui/lib/index.js"></script>

  <style>
    .body{
      min-width: 1366px;
    }
  </style>
</head> 

<body>
<div id="login" v-loading="loading" style="margin: 20%; background-color: #8c939d; align-content: center; text-align: center">

  <div class="divContainer" style=" margin: 30%; align-content: center">
    <div class="divHead" style="align-content: center;">茂名民宿短租</div>
    <div class="divHead">员工登录</div>
    <el-input placeholder=" 请输入手机号码" v-model="form.phone"  maxlength='20'/></el-input>
    <el-input placeholder=" 请输入密码" v-model="form.password"  maxlength='20' type="password" /></el-input>
    <div class="divMsg" v-if="msgFlag" style="font-size: 10px;color: #bd2c00" >手机号输入不正确，或者密码少于6位，请重新输入</div>
    <div class="divSplit"></div>
    <el-input placeholder=" 请输入验证码" v-model="form.code"  maxlength='20'/></el-input>
    <span @click='getCode' style="background-color: #fcfcfc" >获取验证码</span>
    <el-button type="primary" :class="{btnSubmit:1===1,btnNoPhone:!form.phone,btnPhone:form.phone}" style="background-color: #409eff" @click="btnLogin">登录</el-button>
  </div>
</div>


  <script>
    new Vue({
      el:"#login",
      data(){
        return {
          form:{
            phone:'13112345678',
            password:'123456',
            code:''
          },
          msgFlag:false,
          loading:false
        }
      },
      computed:{},
      created(){},
      mounted(){},
      methods:{

        // 用户发送短信验证码
        async getCode() {
          let _this =this;
          this.form.code = '';
          const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
          if (regex.test(this.form.phone)) {
            this.msgFlag = false
            // this.form.code = (Math.random()*1000000).toFixed(0)
            // const res = await sendBusinessMsgApi({phone: this.form.phone})
            axios({
              'url': '/employee/sendMsg',
              'method': 'post',
            data: {"phone" : this.form.phone}
            }).then(function (res) {
              alert(JSON.stringify(res.data))
              // this.$message({
              //     showClose: true,
              //     message: res.data,
              //     // message: '恭喜你，这是一条成功消息',
              //     type: 'success'
              // });
/*              this.$alert(res.data, '这是你的验证码，因为第三方发送短信需要企业认证，所以只能在这里模拟一下', {
                confirmButtonText: '知道了',
                center: true ,
                callback: action => {
                  this.$message({
                    type: 'success',
                    center: true ,
                    message: res.data
                  });
                }
              });*/

              this.$alert('这是你的验证码:  ' + res.data, '短信验证码', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$message({
                    type: 'info',
                    message: `action: ${ action }`
                  });
                }
              });

            })

          } else {
            this.msgFlag = true
          }
        },

        // 用户登录
        async btnLogin(){

          const regex = /^(13[0-9]{9})|(15[0-9]{9})|(17[0-9]{9})|(18[0-9]{9})|(19[0-9]{9})$/;
          let _this = this;
          if(this.form.phone && this.form.code && this.form.password.length >=6 && regex.test(this.form.phone)){

            this.loading = true

            axios({
              'url': '/employee/login',
              'method': 'post',
              data: {"phone" : _this.form.phone, "code" : _this.form.code, "password" : _this.form.password}
            }).then(function (res) {
              _this.loading = false
              if(res.data.code === 1){
                sessionStorage.setItem("employeePhone",_this.form.phone)
                alert("跳转页面运行了")


              // 如果是 超级管理员，则跳到超级管理员的页面
                if (_this.form.phone == '13112345678'){
                  alert("这是 13112345678")
                  window.requestAnimationFrame(()=>{
                    window.location.href= '../Employee/adminIndex.html'
                  })
                } else {
                  window.requestAnimationFrame(()=>{
                    window.location.href= '../Employee/EmployeeIndex.html'
                  })
                }

              }else{
                // this.$notify({ type:'warning', message:res.msg});
                _this.$message.error(res.msg);

              }
            })
          }else{
            // this.$notify({ type:'warning', message:'请输入手机号码'});
            _this.$message.error('请输入手机号码和验证码，密码不得小于6位');
          }
        }



      }
    })
  </script>
</body>

</html>
